<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <title>Vue中的指令</title>
</head>
<!-- v-once 所有节点在初次动态渲染后，就成为静态值了 
     v-cloak  不会将未经动态渲染的页面展示在浏览器上
     v-pre 在未加指令语法，或者模板语法上用，可以跳过此指令的解析，加快页面编译
    自定义指令 指令所在模板被重新解析时会被调用。
    -->

<body>
   <div id="root1">
   <h2>n的值为{{n}}</h2>
   <h2 v-once>n的初始化的值为{{n}}</h2>
   <!-- <h2 >n放大10倍后的值是<span v-big="n"></span></h2><br><br> -->
   <h2 >n放大10倍后的值是<span v-big-number="n"></span></h2><br><br>
   <input type="text" v-fbind="n">
   <button @click="n++">点我n+1</button>
   </div> 
   <script>
//#rigion
    Vue.directive('fbind',{
        //指令与元素成功绑定时
        bind(element,binding){
            element.value=binding.value
        },
        //指令元素插入页面时
        inserted(element,binding){
            element.focus();
        },
        //指令所在模板被重新解析时
        update(element,binding){
            element.value=binding.value;
        }
    })
//#endrigion
    new Vue({
    el: '#root1',
    data: {
    n:1
    },
    methods:{},
    directives:{
        'big-number'(element,binding){
            element.innerText=(binding.value)*10;
        }
    }
    }
    )
   </script>
</body>
</html>